<template>
  <div class="profile-container fade-in">
    <!-- 编辑资料对话框 - 简洁绿色主题 -->
    <el-dialog
      v-model="editDialogVisible"
      title="编辑个人资料"
      width="480px"
      class="sleek-edit-dialog"
    >
      <el-form
        ref="editFormRef"
        :model="editForm"
        :rules="editRules"
        label-width="70px"
        class="compact-green-form"
      >
        <!-- 头像上传 -->
        <div class="upload-section-single">
          <div class="upload-card-single">
            <div class="upload-title">头像</div>
            <div
              class="upload-zone-single"
              @click="triggerAvatarUpload"
              @drop.prevent="handleDrop($event, 'avatar')"
              @dragover.prevent="handleDragOver"
              @dragleave="handleDragLeave"
              :class="{ dragover: isDragging === 'avatar' }"
            >
              <div v-if="!avatarPreview && !editForm.avatarUrl" class="upload-empty-single">
                <div class="avatar-placeholder">
                  <i class="el-icon-plus"></i>
                </div>
              </div>
              <div v-else class="upload-preview-container-single">
                <img
                  :src="avatarPreview || editForm.avatarUrl"
                  class="avatar-preview-single"
                  alt="头像预览"
                />
                <button type="button" class="remove-btn-single" @click.stop="removeAvatar">
                  ×
                </button>
              </div>
            </div>
          </div>

          <!-- 背景图上传 -->
          <div class="upload-card-single">
            <div class="upload-title">背景图</div>
            <div
              class="upload-zone-single background-upload"
              @click="triggerBackgroundUpload"
              @drop.prevent="handleDrop($event, 'background')"
              @dragover.prevent="handleDragOver"
              @dragleave="handleDragLeave"
              :class="{ dragover: isDragging === 'background' }"
            >
              <div v-if="!backgroundPreview && !editForm.backgroundUrl" class="upload-empty-single">
                <div class="background-placeholder">
                  <i class="el-icon-plus"></i>
                </div>
              </div>
              <div v-else class="upload-preview-container-single">
                <img
                  :src="backgroundPreview || editForm.backgroundUrl"
                  class="background-preview-single"
                  alt="背景图预览"
                />
                <button type="button" class="remove-btn-single" @click.stop="removeBackground">
                  ×
                </button>
              </div>
            </div>
          </div>
        </div>

        <!-- 隐藏的文件输入 -->
        <input
          ref="avatarInputRef"
          type="file"
          accept="image/*"
          style="display: none"
          @change="handleAvatarChange"
        />
        <input
          ref="backgroundInputRef"
          type="file"
          accept="image/*"
          style="display: none"
          @change="handleBackgroundChange"
        />

        <!-- 表单字段 -->
        <div class="form-fields">
          <el-form-item label="昵称" prop="nickname">
            <el-input v-model="editForm.nickname" class="compact-input" />
          </el-form-item>

          <el-form-item label="邮箱" prop="email">
            <el-input v-model="editForm.email" class="compact-input" />
          </el-form-item>

          <el-form-item label="性别" prop="gender">
            <el-radio-group v-model="editForm.gender" class="gender-radio-group">
              <el-radio label="M">男</el-radio>
              <el-radio label="F">女</el-radio>
              <el-radio label="O">其他</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="生日" prop="birthday">
            <el-date-picker
              v-model="editForm.birthday"
              type="date"
              placeholder="选择生日"
              class="compact-date"
              value-format="YYYY-MM-DD"
            />
          </el-form-item>

          <el-form-item label="简介" prop="bio">
            <el-input
              v-model="editForm.bio"
              type="textarea"
              :rows="3"
              placeholder="简单介绍一下自己..."
              class="compact-textarea"
            />
          </el-form-item>
        </div>
      </el-form>

      <template #footer>
        <div class="sleek-footer">
          <el-button @click="handleEditClose" class="footer-btn cancel-btn">取消</el-button>
          <el-button type="primary" @click="submitEdit" class="footer-btn save-btn">保存</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 关注/粉丝列表对话框 -->
    <el-dialog v-model="followDialogVisible" :title="followDialogTitle" width="400px">
      <div class="follow-list">
        <div
          v-for="user in followList"
          :key="user.id"
          class="follow-item"
          @click="goToUserProfile(user.id)"
        >
          <img :src="user.avatarUrl || '/default-avatar.png'" class="follow-avatar" />
          <div class="follow-info">
            <div class="follow-name">{{ user.nickname || user.username || '匿名用户' }}</div>
            <div class="follow-bio">{{ user.bio || '暂无简介' }}</div>
          </div>
        </div>
        <div v-if="followList.length === 0" class="empty-follow">
          <i class="el-icon-user"></i>
          <p>{{ followDialogType === 'following' ? '还没有关注任何人' : '还没有粉丝' }}</p>
        </div>
      </div>
    </el-dialog>

    <!-- 用户信息卡片 -->
    <div class="profile-header">
      <div
        class="cover-photo"
        :style="{ backgroundImage: `url(${user.backgroundUrl || '/default-cover.jpg'})` }"
      ></div>
      <div class="user-info">
        <div class="avatar-container">
          <img :src="user.avatarUrl || '/default-avatar.png'" alt="头像" class="avatar" />
        </div>
        <div class="user-details">
          <h1 class="username">{{ user.nickname || user.username }}</h1>
          <p class="user-id">@{{ user.username }}</p>
          <div class="stats">
            <div class="stat-item" @click="openFollowDialog('followers')" style="cursor: pointer">
              <span class="stat-value">{{ stats.followers || 0 }}</span>
              <span class="stat-label">粉丝</span>
            </div>
            <div class="stat-item" @click="openFollowDialog('following')" style="cursor: pointer">
              <span class="stat-value">{{ stats.following || 0 }}</span>
              <span class="stat-label">关注</span>
            </div>
          </div>
          <div class="actions">
            <el-button v-if="isOwnProfile" type="primary" @click="editDialogVisible = true">
              编辑资料
            </el-button>
            <el-button
              v-else
              :type="isFollowing ? 'default' : 'primary'"
              @click="toggleFollow"
              :loading="followLoading"
            >
              {{ isFollowing ? '已关注' : '关注' }}
            </el-button>
          </div>
        </div>
      </div>
    </div>

    <!-- 标签页 -->
    <div class="tabs">
      <el-button-group>
        <el-button :class="{ active: activeTab === 'profile' }" @click="activeTab = 'profile'">
          个人介绍
        </el-button>
        <el-button :class="{ active: activeTab === 'music' }" @click="activeTab = 'music'">
          音乐作品
        </el-button>
        <el-button :class="{ active: activeTab === 'album' }" @click="activeTab = 'album'">
          专辑作品
        </el-button>
      </el-button-group>
    </div>

    <!-- 内容区域 -->
    <div class="tab-content">
      <!-- 个人介绍 -->
      <div v-if="activeTab === 'profile'" class="profile-section">
        <div class="profile-info">
          <div class="profile-info-item">
            <h3>生日</h3>
            <p>{{ user.birthday || '未设置生日' }}</p>
          </div>
          <div class="profile-info-item">
            <h3>个人介绍</h3>
            <p>{{ user.bio || '这个人很懒，什么都没留下~' }}</p>
          </div>
        </div>
      </div>

      <!-- 音乐列表 -->
      <div v-if="activeTab === 'music'" class="music-section">
        <div v-if="musicList.length === 0" class="empty-state">
          <i class="el-icon-music"></i>
          <p>{{ isOwnProfile ? '你还没有上传音乐' : '该用户还没有上传音乐' }}</p>
        </div>
        <div v-else class="music-list">
          <div
            v-for="music in musicList"
            :key="music.id"
            class="music-card"
            @click="goToMusicDetail(music.id)"
          >
            <div class="card-image" @click.stop="playMusic(music)">
              <img :src="music.coverUrl || '/default-music-cover.jpg'" :alt="music.title" />
              <div class="play-overlay">
                <img src="/src/assets/icon/play_2.svg" alt="播放" class="play-icon" />
              </div>
            </div>
            <div class="card-content" @click.stop="goToMusicDetail(music.id)">
              <h3 class="music-title">{{ music.title }}</h3>
              <p class="music-artist">{{ music.artist }}</p>
              <p class="music-genre">{{ music.genreName || '未知分类' }}</p>
              <p class="music-date">{{ formatDate(music.createdAt) }}</p>
            </div>
          </div>
        </div>
      </div>

      <!-- 专辑列表 -->
      <div v-if="activeTab === 'album'" class="album-section">
        <div v-if="albumList.length === 0" class="empty-state">
          <i class="el-icon-collection"></i>
          <p>{{ isOwnProfile ? '你还没有创建专辑' : '该用户还没有创建专辑' }}</p>
        </div>
        <div v-else class="album-list">
          <div
            v-for="album in albumList"
            :key="album.id"
            class="album-card"
            @click="goToAlbumDetail(album.id)"
          >
            <div class="card-image">
              <img :src="album.coverUrl || '/default-album-cover.jpg'" :alt="album.title" />
            </div>
            <div class="card-content">
              <h3 class="album-title">{{ album.title }}</h3>
              <p class="album-date">{{ formatDate(album.createdAt) }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { getUserInfoById, updateUserProfile, getUserStats } from '@/api/user'
import { getMusicByUserId } from '@/api/music'
import { getUserAlbums } from '@/api/album'
import {
  checkFollowing,
  followUser,
  unfollowUser,
  getFollowingList,
  getFollowersList,
} from '@/api/user'
import { useUserStore } from '@/stores/user'
import { eventBus } from '@/utils/eventBus'

const route = useRoute()
const router = useRouter()
const userStore = useUserStore()

// 响应式数据
const user = ref({})
const musicList = ref([])
const albumList = ref([])
const stats = ref({})
const isFollowing = ref(false)
const followLoading = ref(false)

// 编辑相关
const editDialogVisible = ref(false)
const editForm = ref({})
const editLoading = ref(false)
const editFormRef = ref(null)

// 关注列表相关
const followDialogVisible = ref(false)
const followDialogTitle = ref('')
const followDialogType = ref('')
const followList = ref([])

// 计算属性
const userId = computed(() => route.params.id)
const isOwnProfile = computed(() => userStore.userInfo?.id === parseInt(userId.value))

const activeTab = ref('profile')

// 表单验证规则
const editRules = {
  nickname: [
    { required: true, message: '请输入昵称', trigger: 'blur' },
    { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' },
  ],
  email: [
    { required: true, message: '请输入邮箱', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' },
  ],
  gender: [{ required: false, message: '请选择性别', trigger: 'change' }],
}

// 新增响应式数据
const avatarPreview = ref('')
const backgroundPreview = ref('')
const avatarInputRef = ref(null)
const backgroundInputRef = ref(null)
const isDragging = ref('')

// 方法
const fetchUserProfile = async () => {
  try {
    const res = await getUserInfoById(userId.value)
    user.value = res.data || res
    editForm.value = { ...user.value }
  } catch (error) {
    console.warn('获取用户信息失败:', error.message || error)
    // 401错误已在全局拦截器中处理，这里静默处理
  }
}

const fetchUserStats = async () => {
  try {
    const res = await getUserStats(userId.value)
    if (res.data) {
      stats.value = {
        followers: res.data.followersCount || 0,
        following: res.data.followingCount || 0,
      }
    } else {
      stats.value = { followers: 0, following: 0 }
    }
  } catch (error) {
    console.warn('获取用户统计失败:', error.message || error)
    stats.value = { followers: 0, following: 0 }
  }
}

const fetchUserMusic = async () => {
  try {
    const res = await getMusicByUserId(userId.value)
    const data = res.data || res
    musicList.value = Array.isArray(data) ? data.filter((music) => music && music.id) : []
  } catch (error) {
    console.warn('获取用户音乐失败:', error.message || error)
    musicList.value = []
  }
}

const fetchUserAlbums = async () => {
  try {
    const res = await getUserAlbums(userId.value)
    const data = res.data || res
    albumList.value = Array.isArray(data) ? data.filter((album) => album && album.id) : []
  } catch (error) {
    console.warn('获取用户专辑失败:', error.message || error)
    albumList.value = []
  }
}

const checkFollowStatus = async () => {
  try {
    const res = await checkFollowing(userId.value)
    isFollowing.value = res.data || false
  } catch (error) {
    console.warn('检查关注状态失败:', error.message || error)
  }
}

const toggleFollow = async () => {
  if (!userStore.isLoggedIn) {
    ElMessage.warning('请先登录')
    router.push('/login')
    return
  }

  followLoading.value = true
  try {
    if (isFollowing.value) {
      await unfollowUser(userId.value)
      isFollowing.value = false
      stats.value.followers = Math.max(0, (stats.value.followers || 0) - 1)
      ElMessage.success('已取消关注')
    } else {
      await followUser(userId.value)
      isFollowing.value = true
      stats.value.followers = (stats.value.followers || 0) + 1
      ElMessage.success('关注成功')
    }
  } catch (error) {
    console.error('Failed to toggle follow:', error)
    ElMessage.error('操作失败')
  } finally {
    followLoading.value = false
  }
}

const openFollowDialog = async (type) => {
  followDialogType.value = type
  followDialogTitle.value = type === 'following' ? '关注列表' : '粉丝列表'
  followDialogVisible.value = true

  try {
    if (type === 'following') {
      const res = await getFollowingList(userId.value)
      const pageData = res.data || res
      if (pageData && Array.isArray(pageData.records)) {
        const userPromises = pageData.records.map(async (follow) => {
          try {
            const userRes = await getUserInfoById(follow.followingId)
            return userRes.data || userRes
          } catch (error) {
            return {
              id: follow.followingId,
              username: `用户${follow.followingId}`,
              nickname: `用户${follow.followingId}`,
              bio: '暂无简介',
              avatarUrl: '/default-avatar.png',
            }
          }
        })
        followList.value = await Promise.all(userPromises)
      } else {
        followList.value = []
      }
    } else {
      const res = await getFollowersList(userId.value)
      const pageData = res.data || res
      if (pageData && Array.isArray(pageData.records)) {
        const userPromises = pageData.records.map(async (follow) => {
          try {
            const userRes = await getUserInfoById(follow.followerId)
            return userRes.data || userRes
          } catch (error) {
            return {
              id: follow.followerId,
              username: `用户${follow.followerId}`,
              nickname: `用户${follow.followerId}`,
              bio: '暂无简介',
              avatarUrl: '/default-avatar.png',
            }
          }
        })
        followList.value = await Promise.all(userPromises)
      } else {
        followList.value = []
      }
    }
  } catch (error) {
    console.warn('获取关注列表失败:', error.message || error)
    followList.value = []
  }
}

const goToMusicDetail = (id) => {
  router.push(`/music/${id}`)
}

const goToAlbumDetail = (id) => {
  router.push(`/album/${id}`)
}

const goToUserProfile = (id) => {
  followDialogVisible.value = false
  router.push(`/profile/${id}`)
}

const formatDate = (date) => {
  if (!date) return ''
  return new Date(date).toLocaleDateString('zh-CN')
}

const playMusic = async (music) => {
  try {
    eventBus.emit('playMusic', music)
  } catch (error) {
    console.error('Failed to play music:', error)
  }
}

// 新增方法 - 文件上传相关
const triggerAvatarUpload = () => {
  avatarInputRef.value?.click()
}

const triggerBackgroundUpload = () => {
  backgroundInputRef.value?.click()
}

const handleAvatarChange = (e) => {
  const file = e.target.files[0]
  if (file) {
    handleFile(file, 'avatar')
  }
}

const handleBackgroundChange = (e) => {
  const file = e.target.files[0]
  if (file) {
    handleFile(file, 'background')
  }
}

const handleDrop = (e, type) => {
  const files = e.dataTransfer.files
  if (files.length > 0) {
    handleFile(files[0], type)
  }
  isDragging.value = ''
}

const handleDragOver = (e) => {
  e.preventDefault()
  isDragging.value = e.target.closest('.upload-zone-single').classList.contains('background-upload')
    ? 'background'
    : 'avatar'
}

const handleDragLeave = () => {
  isDragging.value = ''
}

const handleFile = (file, type) => {
  if (!file.type.startsWith('image/')) {
    ElMessage.error('请选择图片文件')
    return
  }

  const maxSize = type === 'avatar' ? 2 * 1024 * 1024 : 5 * 1024 * 1024
  const maxSizeText = type === 'avatar' ? '2MB' : '5MB'

  if (file.size > maxSize) {
    ElMessage.error(`${type === 'avatar' ? '头像' : '背景图'}大小不能超过${maxSizeText}`)
    return
  }

  const reader = new FileReader()
  reader.onload = (e) => {
    if (type === 'avatar') {
      avatarPreview.value = e.target.result
    } else {
      backgroundPreview.value = e.target.result
    }
  }
  reader.readAsDataURL(file)
}

const removeAvatar = () => {
  avatarPreview.value = ''
  editForm.value.avatarUrl = ''
  if (avatarInputRef.value) {
    avatarInputRef.value.value = ''
  }
}

const removeBackground = () => {
  backgroundPreview.value = ''
  editForm.value.backgroundUrl = ''
  if (backgroundInputRef.value) {
    backgroundInputRef.value.value = ''
  }
}

const submitEdit = async () => {
  if (!editFormRef.value) return

  await editFormRef.value.validate(async (valid) => {
    if (!valid) return

    editLoading.value = true
    try {
      const formData = new FormData()
      formData.append('nickname', editForm.value.nickname)
      formData.append('email', editForm.value.email)
      if (editForm.value.gender) formData.append('gender', editForm.value.gender)
      if (editForm.value.bio) formData.append('bio', editForm.value.bio)
      if (editForm.value.birthday) formData.append('birthday', editForm.value.birthday)

      await updateUserProfile(formData)
      await fetchUserProfile()
      editDialogVisible.value = false
      ElMessage.success('资料更新成功')

      avatarPreview.value = ''
      backgroundPreview.value = ''
    } catch (error) {
      console.error('Failed to update profile:', error)
      ElMessage.error('更新失败')
    } finally {
      editLoading.value = false
    }
  })
}

const handleEditClose = () => {
  editForm.value = { ...user.value }
  avatarPreview.value = ''
  backgroundPreview.value = ''
  editDialogVisible.value = false
}

// 监听路由变化
watch(
  () => route.params.id,
  () => {
    if (route.params.id) {
      fetchUserProfile()
      fetchUserStats()
      fetchUserMusic()
      fetchUserAlbums()
      checkFollowStatus()
    }
  },
)

// 全局错误处理
window.addEventListener('unhandledrejection', (event) => {
  if (event.reason?.response?.status === 401) {
    ElMessage.warning('登录已过期，请重新登录')
    event.preventDefault()
  }
})

// 监听路由变化
watch(
  () => route.params.id,
  (newId) => {
    if (newId) {
      fetchUserProfile()
      fetchUserStats()
      fetchUserMusic()
      fetchUserAlbums()
      checkFollowStatus()
    }
  },
)

// 监听标签切换
watch(activeTab, (newTab) => {
  if (newTab === 'music' && musicList.value.length === 0) {
    fetchUserMusic()
  } else if (newTab === 'album' && albumList.value.length === 0) {
    fetchUserAlbums()
  }
})

// 初始化
onMounted(() => {
  fetchUserProfile()
  fetchUserStats()
  fetchUserMusic()
  fetchUserAlbums()
  checkFollowStatus()
})
</script>

<style scoped>
.profile-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
  min-height: 100vh;
}

/* 白色卡片样式 */
.profile-header {
  background: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 24px;
}

.cover-photo {
  height: 200px;
  background-size: cover;
  background-position: center;
  background-color: #f0f0f0;
}

.user-info {
  display: flex;
  align-items: center;
  padding: 2rem;
  gap: 2rem;
}

.avatar-container {
  flex-shrink: 0;
}

.avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 4px solid white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  object-fit: cover;
}

.user-details {
  flex: 1;
}

.username {
  font-size: 1.8rem;
  font-weight: 600;
  color: #2c3e50;
  margin: 0 0 0.5rem;
}

.user-id {
  color: #7f8c8d;
  margin: 0 0 0.5rem;
}

.bio {
  color: #34495e;
  margin: 0 0 1rem;
  line-height: 1.5;
}

.stats {
  display: flex;
  gap: 2rem;
  margin-bottom: 1.5rem;
}

.stat-item {
  text-align: center;
  cursor: pointer;
  transition: transform 0.2s;
}

.stat-item:hover {
  transform: scale(1.05);
}

.stat-value {
  display: block;
  font-size: 1.5rem;
  font-weight: 600;
  color: #2c3e50;
}

.stat-label {
  font-size: 0.9rem;
  color: #7f8c8d;
}

.actions {
  display: flex;
  gap: 1rem;
}

.tabs {
  margin-bottom: 1.5rem;
  text-align: center;
  display: flex;
  justify-content: center;
}

.tab-content {
  /* 去掉外层卡片样式 */
}

/* 绿色按钮统一风格 */
.actions .el-button--primary {
  background-color: #00c851;
  border-color: #00c851;
}

.actions .el-button--primary:hover {
  background-color: #00a844;
  border-color: #00a844;
}

.actions .el-button--success {
  background-color: #00c851;
  border-color: #00c851;
}

.actions .el-button--success:hover {
  background-color: #00a844;
  border-color: #00a844;
}

.actions .el-button--default:hover {
  border-color: #00c851;
  color: #00c851;
}

/* 调整卡片布局为每排5个 */
.music-list,
.album-list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
  max-width: 1200px;
}

/* 白色背景绿色边框 */
.tabs .el-button-group .el-button {
  background-color: white;
  border: 1px solid #00c851;
  color: #00c851;
  transition: all 0.3s ease;
}

.tabs .el-button-group .el-button:hover {
  background-color: #f0f9ff;
}

.tabs .el-button-group .el-button.active {
  background-color: #00c851;
  color: white;
}

/* 个人信息样式 */
.profile-info {
  padding: 1rem 0;
}

.profile-info-item {
  margin-bottom: 1.5rem;
}

.profile-info-item h3 {
  color: #2c3e50;
  margin-bottom: 0.5rem;
}

.profile-info-item p {
  color: #34495e;
  line-height: 1.6;
}

/* 播放图标样式 */
.play-icon {
  width: 20px;
  height: 20px;
  filter: brightness(0) invert(1);
}

/* 音乐卡片样式 */
.music-card,
.album-card {
  background: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  cursor: pointer;
}

.music-card:hover,
.album-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.card-image {
  position: relative;
  width: 100%;
  padding-bottom: 100%; /* 1:1 宽高比 */
  overflow: hidden;
  background-color: #f5f5f5;
}

.card-image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.play-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  background: rgba(0, 200, 81, 0.8);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.card-image:hover .play-overlay {
  opacity: 1;
}

.play-overlay img {
  width: 20px;
  height: 20px;
  filter: brightness(0) invert(1);
  margin: 0;
  padding: 0;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.card-content {
  padding: 12px;
}

.music-title,
.album-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: #2c3e50;
  margin: 0 0 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.music-artist,
.music-genre,
.music-date,
.album-date {
  font-size: 0.8rem;
  color: #7f8c8d;
  margin: 2px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: #7f8c8d;
}

.empty-state i {
  font-size: 48px;
  margin-bottom: 16px;
  color: #bdc3c7;
}

.empty-follow {
  text-align: center;
  padding: 40px 20px;
  color: #7f8c8d;
}

.empty-follow i {
  font-size: 36px;
  margin-bottom: 12px;
  color: #bdc3c7;
}

.follow-list {
  max-height: 400px;
  overflow-y: auto;
}

.follow-item {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid #eee;
  cursor: pointer;
  transition: background-color 0.2s;
}

.follow-item:hover {
  background-color: #f8f9fa;
}

.follow-item:last-child {
  border-bottom: none;
}

.follow-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 12px;
  object-fit: cover;
}

.follow-info {
  flex: 1;
}

.follow-name {
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 2px;
}

.follow-bio {
  font-size: 0.85rem;
  color: #7f8c8d;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ===== 简洁绿色主题编辑对话框样式 ===== */
.sleek-edit-dialog {
  --green-primary: #00c851;
  --green-light: #e6fcf0;
  --green-hover: #00a844;
  --border-radius: 12px;
  --spacing-unit: 16px;
}

.sleek-edit-dialog .el-dialog__body {
  padding: 24px 32px 0;
}

.sleek-edit-dialog .el-dialog__title {
  color: var(--green-primary);
  font-weight: 600;
  font-size: 20px;
}

.sleek-edit-dialog .el-dialog__header {
  border-bottom: 1px solid var(--green-light);
  margin: 0;
  padding: 20px 32px;
}

/* 单列上传样式 */
.upload-section-single {
  margin-bottom: 32px;
}

.upload-card-single {
  margin-bottom: 24px;
}

.upload-card-single .upload-title {
  font-size: 14px;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 12px;
}

.upload-zone-single {
  border: 2px dashed var(--green-primary);
  border-radius: 12px;
  padding: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  background: #fafafa;
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.upload-zone-single:hover {
  border-color: var(--green-hover);
  background: var(--green-light);
  transform: translateY(-1px);
}

.upload-zone-single.dragover {
  border-color: var(--green-hover);
  background: var(--green-light);
  transform: scale(1.02);
}

.upload-zone-single.background-upload {
  min-height: 80px;
}

.upload-empty-single {
  text-align: center;
}

.avatar-placeholder,
.background-placeholder {
  width: 60px;
  height: 60px;
  border: 2px dashed var(--green-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--green-primary);
  font-size: 24px;
  transition: all 0.3s ease;
}

.background-placeholder {
  width: 100px;
  height: 60px;
  border-radius: 8px;
}

.upload-zone-single:hover .avatar-placeholder,
.upload-zone-single:hover .background-placeholder {
  border-color: var(--green-hover);
  color: var(--green-hover);
}

.avatar-preview-single {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--green-primary);
}

.background-preview-single {
  width: 120px;
  height: 80px;
  border-radius: 8px;
  object-fit: cover;
  border: 2px solid var(--green-primary);
}

.upload-preview-container-single {
  position: relative;
  display: inline-block;
}

.remove-btn-single {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 20px;
  height: 20px;
  background: #ff4757;
  color: white;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  z-index: 10;
}

.remove-btn-single:hover {
  background: #ff3838;
  transform: scale(1.1);
}

/* 修复性别选项绿色样式 */
.gender-radio-group {
  display: flex;
  gap: 20px;
}

.gender-radio-group .el-radio__input.is-checked .el-radio__inner {
  background-color: #00c851 !important;
  border-color: #00c851 !important;
}

.gender-radio-group .el-radio__input.is-checked + .el-radio__label {
  color: #00c851 !important;
}

.gender-radio-group .el-radio__inner:hover {
  border-color: #00c851 !important;
}

.gender-radio-group .el-radio__inner {
  border-color: #dcdfe6;
}

.gender-radio-group .el-radio__label {
  color: #606266;
  font-size: 14px;
}

/* 确保所有单选按钮的绿色主题 */
:deep(.el-radio__input.is-checked .el-radio__inner) {
  background-color: #00c851 !important;
  border-color: #00c851 !important;
}

:deep(.el-radio__input.is-checked + .el-radio__label) {
  color: #00c851 !important;
}

:deep(.el-radio__inner:hover) {
  border-color: #00c851 !important;
}

/* 隐藏旧的网格布局样式 */
.upload-section-grid {
  display: none !important;
}

/* 响应式调整 */
@media (max-width: 600px) {
  .sleek-edit-dialog {
    width: 90% !important;
  }

  .upload-zone-single {
    padding: 16px;
    min-height: 100px;
  }

  .avatar-preview-single {
    width: 60px;
    height: 60px;
  }

  .background-preview-single {
    width: 100px;
    height: 60px;
  }

  .avatar-placeholder,
  .background-placeholder {
    width: 50px;
    height: 50px;
    font-size: 20px;
  }

  .background-placeholder {
    width: 80px;
    height: 50px;
  }

  .gender-radio-group {
    flex-direction: column;
    gap: 10px;
  }
}

/* 个人介绍样式 */
.profile-section {
  padding: 20px 0;
}

.profile-card {
  background: white;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  /* max-width: 600px; */
  margin: 0 auto;
}

.profile-info-item {
  margin-bottom: 30px;
}

.profile-info-item:last-child {
  margin-bottom: 0;
}

.profile-info-item h3 {
  color: #00c851;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 10px;
  border-bottom: 2px solid #00c851;
  padding-bottom: 5px;
  display: inline-block;
}

.profile-info-item p {
  color: #2c3e50;
  font-size: 16px;
  line-height: 1.6;
  margin: 0;
}

@media (max-width: 768px) {
  .profile-card {
    margin: 0 10px;
    padding: 20px;
  }

  .profile-info-item h3 {
    font-size: 16px;
  }

  .profile-info-item p {
    font-size: 14px;
  }
}

/* 绿色主题输入框和日历样式 */
:deep(.el-input__wrapper) {
  background-color: #f8fffe;
  border: 1px solid #00c851;
  border-radius: 8px;
  transition: all 0.3s ease;
}

:deep(.el-input__wrapper:hover) {
  border-color: #00a844;
  box-shadow: 0 0 0 2px rgba(0, 200, 81, 0.2);
}

:deep(.el-input__wrapper.is-focus) {
  border-color: #00a844;
  box-shadow: 0 0 0 2px rgba(0, 200, 81, 0.3);
}

:deep(.el-input__inner) {
  color: #2c3e50;
}

:deep(.el-textarea__inner) {
  background-color: #f8fffe;
  border: 1px solid #00c851;
  border-radius: 8px;
  transition: all 0.3s ease;
  color: #2c3e50;
}

:deep(.el-textarea__inner:hover) {
  border-color: #00a844;
  box-shadow: 0 0 0 2px rgba(0, 200, 81, 0.2);
}

:deep(.el-textarea__inner:focus) {
  border-color: #00a844;
  box-shadow: 0 0 0 2px rgba(0, 200, 81, 0.3);
}

/* 日历选择器绿色主题 */
:deep(.el-date-editor) {
  --el-date-editor-border-color: #00c851;
}

:deep(.el-date-editor:hover) {
  border-color: #00a844;
}

:deep(.el-date-editor.is-active) {
  border-color: #00a844;
}

:deep(.el-picker-panel) {
  border: 1px solid #00c851;
  border-radius: 8px;
}

:deep(.el-date-table td.today .el-date-table-cell) {
  color: #00c851;
}

:deep(.el-date-table td.available:hover) {
  color: #00a844;
}

:deep(.el-date-table td.current:not(.disabled) .el-date-table-cell) {
  background-color: #00c851;
  color: white;
}

:deep(.el-year-table td.today .cell) {
  color: #00c851;
}

:deep(.el-year-table td .cell:hover) {
  color: #00a844;
}

:deep(.el-year-table td.current:not(.disabled) .cell) {
  background-color: #00c851;
  color: white;
}

:deep(.el-month-table td.today .cell) {
  color: #00c851;
}

:deep(.el-month-table td .cell:hover) {
  color: #00a844;
}

:deep(.el-month-table td.current:not(.disabled) .cell) {
  background-color: #00c851;
  color: white;
}

/* 选择器绿色主题 */
:deep(.el-select .el-input__wrapper) {
  background-color: #f8fffe;
  border: 1px solid #00c851;
}

:deep(.el-select .el-input__wrapper:hover) {
  border-color: #00a844;
}

:deep(.el-select-dropdown) {
  border: 1px solid #00c851;
  border-radius: 8px;
}

:deep(.el-select-dropdown__item.selected) {
  background-color: #00c851;
  color: white;
}

:deep(.el-select-dropdown__item:hover) {
  background-color: rgba(0, 200, 81, 0.1);
  color: #00a844;
}

/* 底部按钮样式 - 绿色主题 */
.sleek-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 0 0;
  border-top: 1px solid #f0f0f0;
}

.footer-btn {
  min-width: 80px;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.cancel-btn {
  border: 1px solid #00c851;
  color: #00c851;
  background-color: white;
}

.cancel-btn:hover {
  background-color: #f0f9ff;
  border-color: #00a844;
  color: #00a844;
}

.save-btn {
  background-color: #00c851;
  border-color: #00c851;
  color: white;
}

.save-btn:hover {
  background-color: #00a844;
  border-color: #00a844;
}
</style>
